<template>
	<view class="container">
		<view class="step" v-for="(item,index) in stepList" :key="index">
			<view class="img-box">
				<view class="line"  :style="index === 0 ? 'opacity: 0;' : ''" ></view>
				<view class="img-size">
					<img :src="$imgUrl(item.unactive)" style="width: 70upx;height: 70upx;" alt="">
				</view>
				<view class="line" :style="index === (stepList.length - 1) ? 'opacity: 0;' : ''"></view>
			</view>
			<view>
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
			currentStep: { type: Number, default: 1 } 
		},
		data() {
			return {
				list:[
					{
						name:'预约',
						activeIcon:'icon/step1-active.png',
						unactive:'icon/step1-active.png'
					},{
						name:'接待',
						activeIcon:'icon/step2-active.png',
						unactive:'icon/step2.png'
					},{
						name:'维修',
						activeIcon:'icon/step3-active.png',
						unactive:'icon/step3.png'
					},{
						name:'结算',
						activeIcon:'icon/step4-active.png',
						unactive:'icon/step4.png'
					},{
						name:'交车',
						activeIcon:'icon/step5-active.png',
						unactive:'icon/step5.png'
					}
				],
			}
		},
		computed: {
			stepList() {
				const { currentStep, list } = this;
				const stepList = list.map((item, index) => {
					if(index + 1 <= currentStep) {
						item.unactive = `icon/step${index + 1}-active.png`;
					}
					return item;
				})
				return stepList;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
